<!-- 单油站时直接跳转到选择油枪页面, 多油站时在此选择门店 -->
<template>
    <page>
        <m-header2 icon="icon-chakantiezidingwei">
            定位名称<span slot="right">附近有<b class="c7">{{list.length}}</b>个油站</span>
        </m-header2>
        <div class="white-bg mt10 px12" v-for="(i, index) in list" @click="openLink(i)">
            <p class="f16 pt20" flex="main:justify cross:center">{{i.shopName}} <span
                    class="f13 c7">距离{{i.dist | meter2kilometre}} </span>
            </p>
            <p class="py16 f13 text2">{{i.address}}</p>
            <div flex="box:mean" class="tc text3 bdt py2" @click.stop>
                <a class="f16 bdr h40" :href="`tel:${i.phone}`">
                    <i class="iconfont icon-dianhua2 mr6 text2 f18"></i>电话咨询
                </a>
                <a class="f16 h40" @click.stop="openLocation(i)">
                    <i class="iconfont icon-daohang mr6 text2 f18"></i>位置导航
                </a>
            </div>
        </div>
    </page>
</template>
<script>
  import { get_nearly, meter2kilometre } from '@/utils/经纬度计算'
  import { getLocation, openLocation } from '@/common/jssdk'

  export default {
    data () {
      return {
        coords: {}, // 经纬度
      }
    },
    filters: {
      meter2kilometre
    },
    async created () {
      getLocation().then(coords => {
        this.location_state = true
        this.coords = coords
      }).catch(_ => {
        this.location_state = false
      })
    },
    computed: {
      list () {
        const list = this.$g.shopList.slice()
        return list.map(item => get_nearly(this.coords, item)).sort((a, b) => a.dist - b.dist)
      }
    },
    methods: {
      // 根据距离排序列表
      sortList () {

      },
      openLink (shop) {
        this.$router.push({name: 'yjjy', params: shop})
      },
      // 地图导航
      openLocation ({latitude, longitude, shopName: name, address}) {
        openLocation({latitude, longitude, name, address})
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
